<template>
	<view class="content">
		<navbar title='查看题目'>
		</navbar>
		<view class="kaotwo">
			<view class="danone">
				<text class="danti">{{ test_collect.topic.type==1?'多选题':'单选题' }}</text>
				<!-- <image class="icon_sc_n" src="@/static/new/icon_sc_n.png"></image> -->
				<text class="tinum">{{tiinfo.has_number}}/{{ tiinfo.topic_number }}</text>
			</view>
			<text class="tname">{{test_collect.topic.topic}}</text>
		</view>
		<view class="tithree">
			<view class="items " :class="item.isdui == 1?'dui':item.isdui == 2?'cuo':''" v-for="(item,index) in answer" :key="index">
				<image class="duigou" src="@/static/new/duis.png"></image>
				<image class="icon_cw" src="@/static/new/icon_cw.png"></image>
				<text class="xname">{{ item.option }}.{{item.answer}}</text>
				
			</view>
			<!-- <view class="items cuo">
				<image class="icon_cw" src="@/static/new/icon_cw.png"></image>
				<text class="xname">B.答案2</text>
			</view>
			<view class="items">
				<text class="xname">C.答案2</text>
			</view>
			<view class="items">
				<text class="xname">D.答案2</text>
			</view> -->
		</view>
		<view class="cline"></view>
		<!-- <view class="xuojie" v-if="tiinfo.test_entry_topic.topic.analysis">
			<text class="jietit">答题解析：</text>
			<view class="jiemiao">
				{{tiinfo.test_entry_topic.topic.analysis}}
			</view>
		</view> -->
		<view class="botview">
			<view class="bottwoview">
				<view class="tibview tactive">题目{{ tiinfo.has_number }}</view>
				<view class="tibview" @click="getshang">上一题</view>
				<view class="tibview" @click="getnext">下一题</view>
				<!-- <view class="tibview del" @click="getshan">删除</view>
				<view class="tibview" @click="getqing">清空</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleStyle:{
					fontWeight: 'bold',
					fontSize: '36rpx',
					color: '#111111',
				},
				value:'',
				test_entry_topic_id:'',
				tiinfo:{
					next_id:0,
					prev_id:0
				},
				test_collect:{
					topic:{
						topic:''
					}
				},
				answer:[],
				paper_id:'',//试卷ID
			}
		},
		onLoad(option) {
			if(option.id){
				this.paper_id = option.id
			}
			this.gettitopic()
		},
		onShow() {
		},
		methods: {
			getDetail(){
				this.navrouter("/pages/StudPage/Detail");
			},
			async gettitopic(){
				let res = await this.$u.api.topicsee({
					paper_topic_id:this.test_entry_topic_id,
					paper_id:this.paper_id
				});
				this.tiinfo = res
				this.test_collect = res.paper_topic
				console.log(this.test_collect)
				this.answer = res.answer
				let daan = res.paper_topic.topic.correct_answer_array
				let shuzu = this.answer
				for(let i in shuzu){
					for(let j in daan){
						if(daan[j] == shuzu[i].option){
							shuzu[i].isdui = 1
						}else{
							shuzu[i].isdui = 3
						}
					}
					
				}
				// console.log(shuzu)
				// test_entry_topic_option
				// this.test_entry_id = res.test_entry_id
			},
			getDetail(){
				this.navrouter("/pages/StudPage/Detail");
			},
			getshang(){
				//点击上一题
				if(this.tiinfo.has_number <=1){
					this.$u.toast("没有上一题了");
				}else{
					this.test_entry_topic_id = this.tiinfo.prev_id
					this.gettitopic();//考试详情
				}
			},
			async getnext(){
				//点击下一题
				if(Number(this.tiinfo.has_number) >= Number(this.tiinfo.total_number)){
					this.$u.toast("没有下一题了");
				}else{
					this.test_entry_topic_id = this.tiinfo.next_id
					this.gettitopic();//考试详情
				}
			},
			async getshan(){
				//删除
				let res = await this.$u.api.cuotidel({
					id:this.test_collect.id
				});
				this.$u.toast("操作成功");
				this.getnext()
			},
			async getqing(){
				//清空
				let res = await this.$u.api.cuotiqing({
					
				});
				this.$u.toast("操作成功");
				setTimeout(() => {
					uni.switchTab({ url: '/pages/tabbar/Kaoshi' })
				}, 1000);
			}
		}
	}
</script>
<style scoped lang="scss">
	.content {
		min-height: 100vh;
		background-color: #fff;
		padding-bottom: 150rpx;
		.kaoione{
			height: 80rpx;
			margin: 30rpx
			 30rpx 30rpx;
			background: #EAFFEC;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			.icon_sj{
				margin-right: 7rpx;
				height: 40rpx;
				width: 40rpx;
			}
			.daojishi{
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #1AA313;
			}
			
		}
		.kaotwo{
			padding: 30rpx;
			.danone{
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-bottom: 24rpx;
				.danti{
					width: 120rpx;
					height: 44rpx;
					background: #EAEFFF;
					border-radius: 5rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #3E65E5;
				}
				.icon_sc_n{
					width: 40rpx;
					height: 40rpx;
					margin-left: 20rpx;
				}
				.tinum{
					margin-left: auto;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #999999;
				}
			}
			.tname{
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 36rpx;
				color: #333333;
				margin-bottom: 50rpx;
				display: block;
			}
		}
		.tione{
			margin: 30rpx;
			.img_ks{
				width: 100%;
				height: 400rpx;
			}
			.xuan{
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-top: 30rpx;
				.xuanitem{
					display: flex;
					flex-direction: row;
					align-items: center;
					width: 33.33%;
					justify-content: center;
					.xuanicon{
						width: 44rpx;
						height: 44rpx;
						margin-right: 7rpx;
					}
					text{
						font-family: PingFang SC;
						font-weight: bold;
						font-size: 30rpx;
						color: #333333;
					}
				}
			}
		}

		.line{
			height: 20rpx;
			background: #EEEEEE;
			width: 100%;
		}
		.titwo{
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 30rpx;
			.xitem{
				background: #EEEEEE;
				border-radius: 10rpx;
				padding:15rpx 20rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #51565D;
				margin-right: 20rpx;
			}
			.xactive{
				background: #F0FCF5;
				border: 1px solid #46DB7A;
			}
		}
		.tithree{
			margin: 0 30rpx 50rpx;
			.items{
				// height: 90rpx;
				background: #F8F8F8;
				border-radius: 10rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				padding: 24rpx 30rpx;
				margin-bottom: 20rpx;
				.xname{
					font-weight: 500;
					font-size: 32rpx;
					color: #333333;
					flex: 1;
				}
				.tiname{
					font-weight: 500;
					font-size: 32rpx;
					color: #333333;
					color: #999999;
					display: inline-block;
					margin-left: auto;
				}
				.duigou{
					width: 44rpx;
					height: 44rpx;
					// margin-left: auto;
					display: none;
					margin-right: 20rpx;
				}
				.icon_cw{
					width: 44rpx;
					height: 44rpx;
					// margin-left: auto;
					display: none;
					margin-right: 20rpx;
				}
			}
			.active{
				.duigou{
					display: inline-block;
				}
				background: #EAEFFF;
				.xname{
					color: #3E65E5;
				}
				.tiname{
					color: #3E65E5;
				}
			}
			.dui{
				background: #F0FCF5;
				border-radius: 10rpx;
				border: 1rpx solid #46DB7A;
				// .xname{
				// 	color: #3E65E5;
				// }
				.duigou{
					display: inline-block;
				}
			}
			.cuo{
				background: #FFF2F2;
				border-radius: 10rpx;
				border: 1rpx solid #FF6159;
				.icon_cw{
					display: inline-block;
				}
			}
		}
	}
	.botview{
		position: fixed;
		width: 100%;
		height: 120rpx;
		background: #FFFFFF;
		bottom: 0;
		// padding: 0 60rpx;
		display: flex;
		align-items: center;
		border-top: 1rpx solid #eee;
		justify-content: space-around;
		.bottwoview{
			display: flex;
			width: 92%;
			margin: 0 auto;
			flex-direction: row;
			align-items: center;
			justify-content: space-around;
			
		}
		.tibview{
			height: 85rpx;
			border-radius: 10rpx;
			border: 1px solid #3E65E5;
			margin: 0 12rpx;
			width: 160rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #3E65E5;
		}
		.tactive{
			background: #3E65E5;
			color: #fff;
		}
		.del{
			border: 1px solid #DB372E;
			color: #FF6159;
		}
		.kaihui{
			width: 90%;
			margin: 0 auto;
			height: 78rpx;
			background: #3E65E5;
			border-radius: 20rpx;
			display: flex;
			margin-left: auto;
			align-items: center;
			justify-content: center;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
		}
	}
	.cline{
		height: 20rpx;
		background: #EEEEEE;
		position: relative;
	}
	.xuojie{
		padding: 30rpx;
		.jietit{
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #333333;
			display: block;
			margin-bottom: 20rpx;
		}
		.jiemiao{
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #999999;
		}
	}

</style>
<style>
/deep/.uv-count-down__text{
	font-weight: 500;
	font-size: 32rpx;
	color: #1AA313;
}
</style>